<template>
	<view class="page">

		<view class='banner'>
			<!--顶部轮播图  -->
			<swiper indicator-dots="true" autoplay="true" interval='5000' indicator-active-color="#fff" circular="true" style='height:100%;'>
				<swiper-item v-for="(item,index) in merchantData.poster">
					<image class='banner-img' :src="item"></image>
				</swiper-item>
			</swiper>
		</view>

		<view class='merchant-user'>
			<image class='merchant-user-head' :src="merchantData.shop_avatar"></image>
			<view class='merchant-user-cont'>
				<view class='merchant-user-name'>{{merchantData.name}}</view>
				<view class='merchant-user-icon'>
					<block v-for="(i,item) in merchantData.starLevel">
						<image class="icon-star" v-if="i" src="../../static/images/user-center/star-light.png"></image>
						<image class="icon-star" wx:else src="../../static/images/user-center/star-dark.png"></image>
					</block>
					<!-- <text class='comment'>{{merchantData.critic}}条评论</text> -->
				</view>
				<view class='merchant-user-business'>主营业务:{{merchantData.main_category}} <text v-if="merchantData.sub_category">、{{merchantData.sub_category}}</text></view>
			</view>
			<view class='collect' @tap='collectMerchant' :data-id="merchantData.id">
				<image src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/merchant/collect-000.jpg'></image>
				<text v-if="merchantData.status ==2">取消</text>
				<text v-if="merchantData.status == 1">收藏</text>
			</view>
			<button class="merchant-normal-btn" open-type='share' @tap='bomWxShare'>
				<image src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/merchant/store-000.jpg'></image>
				<text>分享</text>
			</button>
		</view>
		<view class='merchant-relation'>
			<view class='merchant-relation-line'>
				<image src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/merchant/store-host.jpg'></image>
				<text>{{merchantData.address}}</text>
				<view class='back-f' :data-name="merchantData.name" :data-address="merchantData.address" :data-latitude="merchantData.user.latitude"
				 :data-longitude="merchantData.user.longitude" @tap='goMap'>导航到店</view>
			</view>
			<view class='merchant-relation-line'>
				<image src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/merchant/store-tel.jpg'></image>
				<text>{{merchantData.user.mobile}}</text>
				<view class='back-f' :data-tel="merchantData.user.mobile" @tap='phonecallevent'>拨打电话</view>
			</view>
			<view class='merchant-relation-line' v-if="merchantData.introduce">
				<image src='http://aliyun.oss.zxgyzj.com/picture/merchant/shop-briefing.jpg'></image>
				<text style='width:90%;'>店铺简介：{{merchantData.introduce}}</text>
			</view>
		</view>
		<view class='merchant-serve' v-if="merchantData.ads_pictures">
			<image :src="merchantData.ads_pictures"></image>
		</view>
		<!-- 兼职业务员 -->
		<view class='part-time' @tap='applyDetails' :data-id="merchantData.id" :data-userid="merchantData.user.id" data-type='1'
		 v-if="merchantData.signup_img">
			<image @load="partImageLoad" :data-index="0" :style="{height:partImages[0].height+'upx;'}" :src="merchantData.signup_img"></image>
		</view>

		<view class='group'>
			<view class='signup' bindtap='applyDetails' :data-id="merchantData.id" :data-userid="merchantData.user.id" data-type='2'
			 v-if="merchantData.signup_img_tg">
				<image @load="signupImageLoad" :data-index="0" :style="{width:signupImages[0].width+'upx;height:'+signupImages[0]+'upx;'}"
				 :src="merchantData.signup_img_tg"></image>
				<!-- :style="{height:signupImages[0].height+'rpx;'}" -->
			</view>

			<view class='register' v-if="merchantData.signup_img_tg">
				<view class='register-for' @tap='registration' :data-id="merchantData.id">{{registrationName}}</view>
				<view class='register-check' @tap='applyDetails' :data-id="merchantData.id" :data-userid="merchantData.user.id"
				 data-type='2'>查看详情</view>
				<view class='register-tuxedo'>邀请好友参团</view>
			</view>

			<!-- <view class='purchase-details' v-if="merchantData.signup_img_tg">
	        <text>团购详情:请会员点击“报名参团”,成功报名的会员将享受团购投诉协议服务、价格保障及正品保障等服务。参团短信会在开团日前1-2天发送至你报名时预留的电话号码上,请注意查收。</text>
	      </view> -->

			<view class='introduce'>
				<view class='introduce-list' v-for="(item,index) in merchantData.introduce_map">
					<image :data-index="index" :style="{width:images[index].width+'upx;height:'+images[index].height+'upx;'}"
					 :src="item"></image>
					 <!-- @load="imageLoad" -->
				</view>
			</view>
		</view>

		<view class='ercode'>
			<view class='all-ercode' v-if="code || merchantData.wechat_qr_code">
				<view class='all-ercode-ma' v-if="code">
					<image src="code" data-url="code" bindtap='previewImage'></image>
					<text>本店小程序码</text>
				</view>
				<view class='all-ercode-ma' v-if="merchantData.wechat_qr_code">
					<image :src="merchantData.wechat_qr_code" :data-url="merchantData.wechat_qr_code" @tap='previewImage'></image>
					<text>加店主微信</text>
				</view>
			</view>
		</view>

		<view class='fixed-bar'>
			<view class='fixed-bar-right' :data-tel="merchantData.user.mobile" @tap='phonecallevent'>
				<image src='../../static/images/phone.png'></image>
				<text>点击联系店主</text>
			</view>
			<view class='fixed-bar-left fixed-bar-left-border' :data-name="merchantData.name" :data-address="merchantData.user.address"
			 :data-latitude="merchantData.user.latitude" :data-longitude="merchantData.user.longitude" @tap='goMap'>
				<image src='../../static/images/list/host.png'></image>
				<text>导航到店</text>
			</view>
			<button class='fixed-bar-left' open-type='share' @tap='bomWxShare'>
				<image src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/merchant/store-transmit.jpg'></image>
				<text>分享店铺</text>
			</button>
		</view>
	</view>
</template>

<script>
	import app from '../../App.vue';
	import {
		GYZJMODEL as gyzjModel
	} from '../../utils/gyzjModel.js'
	export default {
		onLoad: function(options) {
			var id, type, userId;
			console.log('options的开始', options);
			let that=this;
			if (options) {
				var scene = decodeURIComponent(options.scene);
				console.log('scene的执行', scene);
				if (scene != "undefined") {
					id = scene;
					userId = scene;
				};
				if (options.merId) {
					id = options.merId;
					type = options.type;
					userId = options.userId;
					that.id = id;
					that.type = type;
					that.userId = userId;
				}
			}
			console.log('type为0的开始', type);
			console.log('id的值', id);
			console.log('userId的值', id);
			
			if (type == '0') {
				console.log('type为0的执行');
				/*这里会循环4次*/
				let data = that.list.filter((value) => {
					console.log('value的值a', value);
					return value.id == id;
				})
				data = data[0];
				that.merchantData = data;
			} else {
				console.log('真实店家执行', id);
				// 获取商户详情，这里type是undefined
				gyzjModel.prototype.getMerchantsDetailed(id).then(res=> {
					console.log('真实店家值a', res);
					if (res.code == 1) {
						console.log('res进来的执行',res);
						console.log('res进来的执行merchantData',res.data);
						console.log('res进来的执行id',res.id);
						console.log('res进来的执行userId',res.userId);
						that.merchantData = res.data;
						that.id = res.data.id;
						that.userId = res.data.user_id;
					}
				})
				// merchantModel.indexEwmCode(userId).then((res) => {
				//   if (res.code == 1) {
				//     var array = wx.base64ToArrayBuffer(res.data);
				//     var base64 = wx.arrayBufferToBase64(array);
				//     this.setData({
				//       code: "data:image/png;base64," + base64
				//     })
				//   }
				// })
			}
		},
		/*我返回了信息*/
		onBackPress(){
		    console.log('监听触发返回按钮');
		},
		methods: {
			/*控制图片显示函数*/
			// imageLoad: function (e) {
			//     let image=gyzjModel.prototype.goImageLoad(e);
			//     this.images= image;
			//   },
			// /*控制图片显示函数*/
			// partImageLoad: function (e) {
			//     let image=gyzjModel.prototype.goImageLoad(e);
			//     this.partImages= image;
			// },
			// /*控制图片显示*/
			// signupImageLoad:function(e){
			// 	let image=gyzjModel.prototype.goImageLoad(e);
			// 	this.signupImages= image;
			// },
			//分享到微信
			bomWxShare:function(){
				console.log('a分享的id',this.id);
				console.log('a分享的userId',this.userId);
				console.log('a分享的type',this.type);
				// #ifdef APP-PLUS
				let wx_id=this.main_config_wx_id;
				console.log('wx_id的值',wx_id);
				let imageUrl='/static/allAvatar.png';
				let title='店铺分享';
				let path='pages/merchant/merchant?merId='+this.id+'&userId='+this.userId+'&type='+this.type;
				gyzjModel.prototype.shareLink(title,imageUrl,wx_id,path);
				// #endif
			},
			// 收藏店铺
			  collectMerchant:function (e) {
				  console.log('我的天');
			    console.log(e);
			    // if (this.type != '0') {
			      let id = e.currentTarget.dataset.id;
			      let arr=this.main_getGlobal();
				  if(this.type!=0){
					  gyzjModel.prototype.collectMerchant(id, arr.token,arr.type).then(res => {
						console.log('收藏成功的res',res);
						if (res.code == 1) {
						  if (this.merchantData.status == '2') {
							uni.showToast({
							  title: '取消成功',
							  icon: 'success'
							})
							this.merchantData.status = '1';
							this.merchantData= this.merchantData;
						  } else {
							uni.showToast({
							  title: '收藏成功',
							  icon: 'success'
							})
							this.merchantData.status = '2';
							this.merchantData= this.merchantData;
						  }
				
						}
					  }); 
					}
			  },
			//地图导航
			goMap: function(e) {
				let data = e.currentTarget.dataset;
				console.log('导航的值',data);
				let latitude = Number(data.latitude);
				let longitude = Number(data.longitude);
				uni.getLocation({ //获取当前经纬度
					type: 'gcj02', //返回可以用于wx.openLocation的经纬度，官方提示bug: iOS 6.3.30 type 参数不生效，只会返回 wgs84 类型的坐标信息  
					success: function(res) {
						uni.openLocation({ //​使用微信内置地图查看位置。
							latitude: latitude, //要去的纬度-地址
							longitude: longitude, //要去的经度-地址
							name: data.name,
							address: data.address,
						})
					}
				})
			},
		
			/*放大图片*/
			 previewImage: function (e) {
			    let arr = [];
			    arr.push(e.currentTarget.dataset.url)
			    uni.previewImage({
			      current: 0,
			      urls: arr 
			    });
			  },
			//拨打电话
			phonecallevent: function(e) {
				uni.makePhoneCall({
					phoneNumber: e.currentTarget.dataset.tel
				})
			}
		},
		data() {
			return {
				merchantData: {},
				images: {},
				list: [{
						id: '1',
						name: '新南悦陶瓷 (高新建材市场)',
						critic: '0',
						main_category: '瓷砖',
						sub_category: '陶瓷',
						address: '望城区高星建材批发大市场3-20栋125号',
						user: {
							mobile: '15200875223',
							latitude: 28.2956100000,
							longitude: 112.8342510000
						},
						shop_avatar: ['https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinnan_logo.jpg'],
						starLevel: ['', '', '', '', ''],
						poster: [
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinnan_post1.jpg',
						],
						introduce_map: [
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinyue.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinyue1.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinyue2.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinyue3.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinyue4.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinyue5.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinyue6.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinyue7.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinyue8.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinyue9.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinyue10.jpg',
						],
						wechat_qr_code: 'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinnan_ewm.jpg',
						status: '1',
					},
					{
						id: '3',
						critic: '1',
						main_category: '实木',
						sub_category: '地板',
						name: '鑫波门面',
						address: '长沙市望城雷锋机电市场二期1号门面',
						user: {
							mobile: '15802565898',
							latitude: 28.1994200000,
							longitude: 112.8406000000
						},
						shop_avatar: ['https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinbo_logo.jpg'],
						starLevel: ['', '', '', '', ''],
						poster: [
							'http://aliyun.oss.zxgyzj.com/images/xinbo_post1.jpg',
						],
						introduce_map: [
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinbo_map1.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinbo_map2.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinbo_map3.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinbo_map4.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinbo_map5.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinbo_map6.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinbo_map7.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinbo_map8.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinbo_map9.jpg',
						],
						wechat_qr_code: 'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinbo_ewm.jpg',
						status: '1',
					},
					{
						id: '4',
						critic: '0',
						main_category: '腻子',
						name: '美源环腻子',
						address: '长沙市芙蓉区马王推市场3栋302',
						user: {
							mobile: '15399910657',
							latitude: 28.1988580000,
							longitude: 113.0260130000
						},
						shop_avatar: ['https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/meiyuan_logo.jpg'],
						starLevel: ['', '', '', '', ''],
						poster: [
							'http://aliyun.oss.zxgyzj.com/images/meiyuan_post1.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/meiyuan_post2.jpg',
						],
						introduce_map: [
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/neizi_map.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/neizi_map1.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/neizi_map2.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/neizi_map3.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/neizi_map4.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/neizi_map5.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/neizi_map6.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/neizi_map7.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/neizi_map8.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/neizi_map9.jpg',
						],
						wechat_qr_code: 'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/meiyuan_ewm.jpg',
						status: '1',
					},
					{
						id: '5',
						critic: '0',
						main_category: '陶瓷',
						name: '圣德保陶瓷',
						address: '长沙市雨花区万家丽路喜盈门范城三楼圣德保陶瓷',
						user: {
							mobile: '13974999499',
							latitude: 28.1344420000,
							longitude: 113.0344650000
						},
						shop_avatar: ['https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/shengde_logo.jpg'],
						starLevel: ['', '', '', '', ''],
						poster: [
							'http://aliyun.oss.zxgyzj.com/images/shengde_post1.jpg',
						],
						introduce_map: [
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/shengde_map1.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/shengde_map2.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/shengde_map3.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/shengde_map4.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/shengde_map5.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/shengde_map6.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/shengde_map7.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/shengde_map8.jpg',
							'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/shengde_map9.jpg',
						],
						wechat_qr_code: 'https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/shengde_ewm.jpg',
						status: '1',
					}
				],
				id: '',
				type: '',
				userId: '',
				registrationName: '立即报名',
			}
		}
	}
</script>

<style>
	@import url("../../static/style/app.css");

	page {
		padding-bottom: 120upx;
		background-color: #fff;
	}

	.banner {
		width: 100%;
		height: 400upx;
	}

	.banner-img {
		width: 100%;
		height: 100%;
	}

	.merchant-user {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20upx;
		background-color: #fff;
	}

	.merchant-user-head {
		width: 100upx;
		height: 100upx;
		margin-right: 20upx;
	}

	.merchant-user-cont {
		width: 60%;
		display: flex;
		flex-direction: column;
		font-size: 28upx;
		margin-right: auto;
	}

	.merchant-user-name {
		font-weight: 600;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.merchant-user-icon {
		display: flex;
		align-items: center;
	}

	.comment {
		margin-left: 20upx;
	}

	.merchant-user-business {
		color: #767676;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.merchant-normal-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		color: #000;
		font-size: 28upx;
		background-color: #fff;
		width: 60upx;
		height: 100upx;
		line-height: 1;
		padding: 0;
		margin: 0 20upx;
		border-radius: 0;
	}

	.merchant-normal-btn image {
		width: 40upx;
		height: 40upx;
		margin-bottom: 10upx;
	}

	.collect {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		color: #000;
		font-size: 28upx;
		background-color: #fff;
		width: 60upx;
		height: 100upx;
		line-height: 1;
	}

	.collect image {
		width: 40upx;
		height: 40upx;
		margin-bottom: 10upx;
	}


	.merchant-relation {
		background-color: #fff;
		padding: 20upx;
		border-top: 1px dotted #ccc;
		border-bottom: 1px dotted #ccc;
	}

	.merchant-relation text {
		width: 65%;
		margin-right: auto;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.merchant-relation image {
		width: 25upx;
		height: 36upx;
		margin-right: 20upx;
	}

	.merchant-relation-line {
		display: flex;
		align-items: center;
		height: 80upx;
	}

	.back-f {
		border: 1px solid #f94c48;
		color: #000;
		padding: 5upx 15upx;
		border-radius: 5px;
		font-size: 28upx;
	}

	.merchant-serve {
		width: 100%;
		height: 200upx;
		margin-bottom: 40upx;
	}

	.merchant-serve image {
		width: 100%;
		height: 100%;
	}

	.introduce-list {
		/* width: 100%;
	  height: 400upx; */
		margin: 10upx 0;
		text-align: center;
	}

	.introduce-list image {
		width: 100%;
	}

	.banner {
		width: 100%;
		height: 350upx;
	}

	.banner image {
		width: 100%;
		height: 100%;
	}

	.group {
		padding: 20upx;
	}

	.group-all {
		width: 100%;
		height: 60upx;
		display: flex;
		margin-top: 20upx;
	}

	.group-all-brand {
		width: 40%;
		height: 100%;
		background-color: #B5B5B5;
		color: #fff;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.group-all-name {
		width: 60%;
		height: 98%;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1px solid #B5B5B5;
	}

	.color-red {
		color: #f94c48;
		font-weight: 600;
	}

	.register {
		width: 100%;
		display: flex;
		padding: 40upx 0;
	}

	.register-for,
	.register-check,
	.register-tuxedo {
		width: 32%;
		height: 80upx;
		color: #f94c48;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.register-for {
		background-color: #f94c48;
		color: #fff;
		border-radius: 10upx;
	}

	.register-check {
		border: 1px solid #f94c48;
		border-radius: 10upx;
		margin: 0 2%;
	}

	.register-tuxedo {
		border: 1px solid #f94c48;
		border-radius: 10upx;
	}

	.purchase-details {
		background-color: #eee;
		padding: 30upx;
		font-size: 28upx;
		border-radius: 15upx;
	}

	.ercode {
		padding: 20upx;
	}

	.all-ercode {
		width: 100%;
		height: 300upx;
		background-color: #fff;
		border-radius: 15upx;
		display: flex;
	}

	.all-ercode-ma {
		width: 50%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.all-ercode-ma image {
		width: 200upx;
		height: 200upx;
		margin-bottom: 10upx;
	}

	.fixed-bar {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100upx;
		display: flex;
		border-top: 1px solid #f94c48;
	}

	.fixed-bar-left {
		width: 20%;
		height: 99%;
		line-height: 99%;
		color: #f94c48;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 24upx;
		background-color: #fff;
		padding: 0;
		border-radius: 0;
	}

	.fixed-bar-left-border {
		border-right: 1px solid #f94c48;
	}

	.fixed-bar-left image,
	.fixed-bar-right image {
		width: 40upx;
		height: 40upx;
		margin-bottom: 15upx;
	}

	.fixed-bar-right image {
		margin-right: 10upx;
	}

	.fixed-bar-right {
		width: 60%;
		height: 100%;
		background-color: #f94c48;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 38upx;
	}

	.part-time {
		width: 100%;
		height: 240upx;
		margin: 20upx 0;
	}

	.part-time image {
		width: 100%;
	}

	.signup {
		width: 100%;
	}

	.signup image {
		width: 100%;
	}
</style>
